<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户信息添加页面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
}


.layui-form-label {
 
    width: 100px;
 
}

</style>
</head>
<body>
	<form class="layui-form" action="">
	<div class="layui-form-item" style="margin-top: 20px;" onsubmit="false">
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>用户姓名:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="username" name="username" required=""
			 lay-verify="required|username" lay-reqtext="登录用户名不能为空" placeholder="请输入登录用户名" value=""
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>用户密码:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="password" id="userpassword" name="userpassword" required=""
				  lay-verify="required|pass" lay-reqtext="密码不能为空" placeholder="请输入密码" value="" class="layui-input"
					autocomplete="off" >
			</div>
		</div>
		 <div class="layui-form-item">
        <label class="layui-form-label required"><span style="color: red;">* </span>再次确认密码:</label>
        <div class="layui-input-inline"  style="width: 350px;">
            <input type="password" name="rePwd" lay-verify="required|pass" lay-reqtext="密码不能为空" placeholder="请输入密码" value="" class="layui-input">
        </div>
    </div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>是否禁用：</label>
			<div class="layui-input-block">
				<input type="radio" name="IsLockout" value="1" title="启用" checked="true">
				<input type="radio" name="IsLockout" value="2" title="禁用">
			</div>
		</div>
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">最后登录时间:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="LastLoginTime" name="LastLoginTime" required=""
				lay-reqtext="" placeholder="请输入最后登录时间"
					autocomplete="off" class="layui-input">
			</div>
		</div> -->
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">账户创立时间:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="CreateTime" name="CreateTime" required=""
				lay-reqtext="" placeholder="请输入账户创立时间"
					autocomplete="off" class="layui-input">
			</div>
		</div> -->
	<!-- 	<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>密码错误次数:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="PsdWrongCount" name="PsdWrongCount" required=""
				lay-reqtext="" placeholder="请输入密码错误次数"
					autocomplete="off" class="layui-input">
			</div>
		</div> -->
		<!-- <div class="layui-form-item">
			<label class="layui-form-label">被锁定时间:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="LockTime" name="LockTime" required=""
				lay-reqtext="被锁定时间不能为空" placeholder="请输入被锁定时间" 
					autocomplete="off" class="layui-input">
			</div>
		</div> -->
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>密保邮箱:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="ProtectEmail" name="ProtectEmail" required=""  lay-verify="required|email"
				lay-reqtext="密保邮箱不能为空" placeholder="请输入密保邮箱"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">* </span>密保手机号:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<input type="text" id="ProtectTel" name="ProtectTel" required="" lay-verify="required|phone|number" 
				lay-reqtext="密保手机号不能为空" placeholder="请输入密保手机号"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		
		<div class="layui-btn-container" style="text-align: center;">
			<button class="layui-btn" lay-filter="UsersBtu" lay-submit="">
				添加</button>
		</div>
		</div>
	</form>
	<script type="text/javascript" src="layui/layui.js"></script>
	<script src="js/Global.js" type="text/javascript" charset="utf-8"></script>
	<script>
		//加载了layui的form模块
		layui.use([ 'form' ], function() {
			var form = layui.form;
			var $ = layui.jquery; //引入jquery
			/* $ = layui.$; */
			form.verify({
			  username: function(value, item){ //value：表单的值、item：表单的DOM对象
			    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
			      return '用户名不能有特殊字符';
			    }
			    if(/(^\_)|(\__)|(\_+$)/.test(value)){
			      return '用户名首尾不能出现下划线\'_\'';
			    }
			    if(/^\d+\d+\d$/.test(value)){
		      		return '用户名不能全为数字';
		    	}
		    
			    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
			    if(value === 'name'||value === 'username'||value === 'sb'){
			      return '用户名不能为敏感词';
			    }
			  }
			  
			  //我们既支持上述函数式的方式，也支持下述数组的形式
			  //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
			  ,pass: [
			    /^[\S]{6,12}$/
			    ,'密码必须6到12位，且不能出现空格'
			  ]
			});
			//监听提交
			form.on('submit(UsersBtu)', function(data) {
				var d = data.field; //表单中的数据，定义一个对象来接收
				d.method = "add";
				//通过ajax向数据库提交数据了
				console.log(d); //提交之前的一个数据验证、通过打印的方式先手动的去判断一下这个数据
				var url = globalData.server+'public/addUsers';
				$.post(url, d, function(data) {
					if (data.count > 0) {
						console.log('添加成功');
						var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
						parent.layer.close(index); //关闭窗口
					}else if(data.count == -1){
						layer.msg("添加失败，用户名不能重复！！！",{icon:2});
					}else if(data.count == -2){
						layer.msg("两次密码输入不一致！！！",{icon:2});
					}
				}, "json");
				return false;
			});
		});
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//同时绑定多个时间选择器
			laydate.render({
				elem : '#LastLoginTime',
				type : 'datetime'
			});
			laydate.render({
				elem : '#CreateTime',
				type : 'datetime'
			});
			laydate.render({
				elem : '#LockTime',
				type : 'datetime'
			});
		});
	</script>
</body>
</html>